<template>
	<view>
		<view class="addres-input">
			姓名 <input v-model="addresList.name" placeholder="请输入姓名" />
		</view>
		<view class="addres-input">
			电话 <input v-model="addresList.number" placeholder="请输入电话" />
		</view>
		<view class="addres-input">
			地区 <input v-model="addresList.area" placeholder="请选择" @tap="regionVisible=true" :center="true" class="value-class" />
		</view>
		<w-picker :visible.sync="regionVisible" mode="region" :value="defaultRegion" default-type="value" :hide-area="false"
		 @confirm="onConfirm($event,'region')" @cancel="onCancel" ref="region"></w-picker>

		<view class="addres-input">
			详细地址<input v-model="addresList.addres" placeholder="请输入详细地址" />
		</view>

		<view class="addres-input">
			设为默认地址
			<van-switch checked :v-model="addresList.checked" style="margin-left: 10px;" />
		</view>


		<view class="van-but">
			<van-button round type="info" size="large" color="linear-gradient(to right, #4bb0ff, #6149f6)" @tap="saveAddres">保存</van-button>
		</view>



		<!-- 		<van-cell-group>
		
			<van-field label="姓名" placeholder="请输入姓名" border="false"   input-align="right" @change="changeShoppingName" />
			<van-field label="电话" placeholder="请输入电话" border="false" input-align="right"/>
			<van-cell title="地区" is-link  @tap="regionVisible=true" :value="result.result" :center="true" class="value-class" />
			
			<van-field label="详细地址" placeholder="请输入详细地址" border="false"  input-align="right"/>

		</van-cell-group>
 -->



	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from "vuex"
	import wPicker from "@/components/w-picker/w-picker.vue";

	export default {
		data() {
			return {

				addresList: {
					openid: "",
					name: "",
					number: "",
					area: "",
					addres: "",
					checked: true
				},

				regionVisible: false,

				defaultRegion: ["110000", "110100", "100101"],

			}
		},
		components: {
			wPicker
		},
		computed: {
			...mapState("me", ['userInfo']),

		},
		methods: {
			...mapActions("addres", ['addres']),

			saveAddres() {
				this.addresList.openid = this.userInfo.openId;
				console.log(this.addresList)

				uni.request({
					url: this.$apiServer + "addres",
					method: "POST",
					data: this.addresList,
					success: (res) => {
						this.addres(this.addresList)
						uni.navigateBack();
					}
				})


			},
			onConfirm(res) {
				this.addresList.area = res.result;


			},
			onCancel() {

			}
		},
		onLoad() {
			// uni.getLocation({
			//     type: 'wgs84',
			//     success: function (res) {
			//         console.log('当前位置的经度：' + res.longitude);
			//         console.log('当前位置的纬度：' + res.latitude);
			// 		console.log(res.address)
			//     }
			// });

			uni.getLocation({
				type: 'wgs84',
				success: (res)=> {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					var point = new plus.maps.Point(res.longitude, res.latitude);
					plus.maps.Map.reverseGeocode(
						point, {},
						(event)=> {
							var address = event.address; // 转换后的地理位置
							var point = event.coord; // 转换后的坐标信息
							var coordType = event.coordType; // 转换后的坐标系类型
							console.log(address, 'address');
							this.addresList.area=address.substr(0,address.indexOf('县')+1)
							this.addresList.addres=address.substr(address.indexOf('县')+1,address.length)
						},
						
					);
					
				}
			});

		}
	}
</script>

<style lang="scss" scoped>
	.van-but {
		margin: 12px;
	}

	.addres-input {
		display: flex;
		font-size: 16px;
		padding: 15px;

		input {
			margin-left: 15px;
		}

		border-bottom: 1px solid #ebedf0;
	}
</style>
